﻿<link href="~/Scripts/jquery-easyui-extensions/validatebox/jeasyui.extensions.validatebox.css" rel="stylesheet" />
<script src="~/Scripts/jquery-easyui-extensions/validatebox/jeasyui.extensions.validatebox.rules.js"></script>

<div class="easyui-panel" data-options="fit:true,border:false" style="padding:20px;">
    <table border="0" style="width:100%;">
        <tr style="height:70px;">
            <td>
                只允许输入英文字母或数字
                <br />
                <input class="easyui-validatebox" type="text" value="" data-options="validType:['engNum']" />
            </td>
            <td>
                只允许汉字、英文字母或数字
                <br />
                <input class="easyui-validatebox" type="text" value="" data-options="validType:['chsEngNum']" />
                <br />
            </td>
            <td>
                验证是否为合法的用户名
                <br />
                <input class="easyui-validatebox" type="text" value="" data-options="validType:['name']" />
                <br />
            </td>
            <td>
                指定字符最小3长度
                <br />
                <input class="easyui-validatebox" type="text" value="" data-options="validType:['minLength[3]']" />
                <br />
            </td>
        </tr>
        <tr style="height:70px;">
            <td>
                指定字符最大5长度
                <br />
                <input class="easyui-validatebox" type="text" value="" data-options="validType:['maxLength[5]']" />
                <br />
            </td>
            <td>
                指定字符最小3长度、最大5长度
                <br />
                <input class="easyui-validatebox" type="text" value="" data-options="validType:['minLength[3]','maxLength[5]']" />
                <br />
            </td>
            <td>
                必须包含指定的内容
                <br />
                <input id="v12" class="easyui-validatebox" type="text" value="" />
                <br />
            </td>
            <td>
                以指定的字符开头
                <br />
                <input id="v13" class="easyui-validatebox" type="text" value="" />
                <br />
            </td>
        </tr>
        <tr style="height:70px;">
            <td>
                以指定的字符结束
                <br />
                <input id="v14" class="easyui-validatebox" type="text" value="" />
                <br />
            </td>
            <td>
                短日期(yyyy-MM-dd)格式
                <br />
                <input class="easyui-validatebox" type="text" value="" data-options="validType:['shortDate']" />
                <br />
            </td>
            <td>
                电话号码(中国)格式
                <br />
                <input class="easyui-validatebox" type="text" value="" data-options="validType:['tel']" />
                <br />
            </td>
            <td>
                移动电话号码(中国)格式
                <br />
                <input class="easyui-validatebox" type="text" value="" data-options="validType:['mobile']" />
                <br />
            </td>
        </tr>
        <tr style="height:70px;">
            <td>
                邮政编码(中国)格式
                <br />
                <input class="easyui-validatebox" type="text" value="" data-options="validType:['zipCode']" />
                <br />
            </td>
            <td>
                必须包含中文汉字
                <br />
                <input class="easyui-validatebox" type="text" value="" data-options="validType:['existChinese']" />
                <br />
            </td>
            <td>
                必须是纯中文汉字
                <br />
                <input class="easyui-validatebox" type="text" value="" data-options="validType:['chinese']" />
                <br />
            </td>
            <td>
                必须是纯英文字母
                <br />
                <input class="easyui-validatebox" type="text" value="" data-options="validType:['english']" />
                <br />
            </td>
        </tr>
        <tr style="height:70px;">
            <td>
                必须是合法的文件名(不能包含字符 \\/:*?\"<>|)
                <br />
                <input class="easyui-validatebox" type="text" value="" data-options="validType:['fileName']" />
                <br />
            </td>
            <td>
                必须是正确的 IP地址v4 格式
                <br />
                <input class="easyui-validatebox" type="text" value="" data-options="validType:['ip']" />
                <br />
            </td>
            <td>
                必须是正确的 url 格式
                <br />
                <input class="easyui-validatebox" type="text" value="" data-options="validType:['url']" />
                <br />
            </td>
            <td>
                必须是合法的身份证号码(中国)格式
                <br />
                <input class="easyui-validatebox" type="text" value="" data-options="validType:['idCard']" />
                <br />
            </td>
        </tr>
        <tr style="height:70px;">
            <td>
                必须是合法的整数格式
                <br />
                <input class="easyui-validatebox" type="text" value="" data-options="validType:['integer']" />
                <br />
            </td>
            <td>
                必须是合法的整数格式且值介于 10 与 21 之间
                <br />
                <input id="v15" class="easyui-validatebox" type="text" value="" />
                <br />
            </td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>
                <input id="v16" type="text" value="matrixkey" />
            </td>
            <td>
                <input id="v17" class="easyui-validatebox" type="text" value="" /> 输入左边输入框中一模一样的内容
            </td>
        </tr>
    </table>
</div>

<script>
    $(function () {

        $("#v12").validatebox({
            validType: ['contains["2b"]']
        });

        $("#v13").validatebox({
            validType: ['startsWith["2b"]']
        });

        $("#v14").validatebox({
            validType: ['endsWith["2b"]']
        });

        $("#v15").validatebox({
            validType: ['integerRange[10,21]']
        });


        $("#v17").validatebox({
            //以指定ID的方式去匹配
            //validType: ['equals["v16","id"]']
            //,
            //以jq选择器的方式去匹配
            validType: ['equals["#v16","jquery"]']
        });

    });
</script>